<template>
  <div class="todo-block">
    <el-checkbox
      v-model="value.isChecked"
      style="margin-right: 10px"
      @change="change"
    ></el-checkbox>
    <EditorInput
      class="ed"
      :value="value.html"
      :text="value.text"
      :type="type"
      :BlocksIndex="BlocksIndex"
    />
  </div>
</template>

<script>
import EditorInput from "../EditorInput.vue";

export default {
  name: "TodoBlock",
  props: ["value", "type", "BlocksIndex"],
  components: { EditorInput },

  data() {
    return {};
  },
  methods: {
    change(e) {
      let blockInfo = {
        index: this.BlocksIndex,
        blockItem: {
          type: "todo",
          data: this.value,
        },
      };
      this.$store.commit("mutationUpdateCurrentPageBlocks", blockInfo);
    },
  },
  computed: {
    currentPageBlocks() {
      return this.$store.state.currentPageBlocks;
    },
  },
};
</script>

<style lang="less">
.todo-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .el-checkbox__inner {
    margin-bottom: 1.5px;
    width: 16px;
    height: 16px;
  }
  .el-checkbox__inner::after {
    height: 9px;
    left: 5px;
  }
}
</style>